<template>
<!-- 设置登录密码 -->
    <div class="Lo_set_password">
        <header>
        <!-- 返回 -->
        <img @click='Lo_set_back' class="Lo_set_back" src="../../../static/imgs/return.png">
        <p>设置</p>

    </header>

    <main>
        <section>
            <article class="phone">
                <span>手机号</span>
                <input type="text" placeholder="请输入手机号">
            </article>

            <article class="code">
                <span>验证码</span>
                <input type="text" placeholder="请输入验证码">
            <!-- 获取验证码 -->
                <p class="time">获取验证码</p>
            </article>

        </section>

        <section class="Next">
                <p>收不到短信 ？试试<span>语音验证码</span></p>
                <div>下一步</div>
        </section>


    </main>

    </div>
</template>
<script>
    export default {
          name:'Login_set',
          methods:{
          Lo_set_back:function(){
              this.$router.go(-1)
          }
      }

    }
</script>
<style scoped lang='less'>
    .PxToRem(@name, @px){
    @{name}: @px / 75 * 1rem;
}
.Flex{
    display:flex;
}
.line-height(@arg){.px2rem(line-height, @arg);}
.font-size(@arg){.px2rem(font-size, @arg);}
.font(@fz,@color){
    .px2rem(font-size,@fz);
    color: @color;
}
.border-bottom(@px,@xian,@color){
    .px2rem(border-bottom-width,@px);
    border-bottom-style: @xian;
    border-bottom-color: @color;
}
.border-top(@px,@xian,@color){
    .px2rem(border-top-width,@px);
    border-top-style: @xian;
    border-top-color: @color;
}
.border(@px,@xian,@color){.px2rem(border-width,@px);border-style: @xian; border-color: @color;}
.padding-top(@top){.px2rem(padding-top, @top);}
.padding-right(@right){.px2rem(padding-right, @right);}
.padding-bottom(@bottom){.px2rem(padding-bottom, @bottom);}
.padding-left(@left){.px2rem(padding-left, @left);}
.padding(@top,@right,@bottom,@left){
   .px2rem(padding-top,@top);
   .px2rem(padding-right,@right);
   .px2rem(padding-bottom,@bottom);
   .px2rem(padding-left,@left);
}
.margin-top(@top){.px2rem(margin-top, @top);}
.margin-right(@right){.px2rem(margin-right, @right);}
.margin-bottom(@bottom){.px2rem(margin-bottom, @bottom);}
.margin-left(@left){.px2rem(margin-left, @left);}
.margin(@top,@right,@bottom,@left){
   .px2rem(margin-top,@top);
   .px2rem(margin-right,@right);
   .px2rem(margin-bottom,@bottom);
   .px2rem(margin-left,@left);
}


header{
    background: url(../../../static/imgs/Reg_serve_bg01.jpg);
    .PxToRem(height,88);
    .PxToRem(font-size,40);
    .Flex;
    padding-left:2%;
    align-items:center;
      p{
        margin-left: 5%;
      }
      img{
        .PxToRem(width,55);
        .PxToRem(height,53);
      }
}

section{
  .PxToRem(margin-top,30);
  border-bottom:1px solid #ccc;
  border-top:1px solid #ccc;
  padding: 0 5%;
  article{
    .PxToRem(height,100);
    .Flex;
    align-items:center;
    color:#767676;
    .PxToRem(font-size,30);
    span{
      .PxToRem(width,100);
    }
    input{
      border:none;
      .PxToRem(margin-left,30);
    }
  }
    .phone{
      border-bottom:1px solid #ccc;
    }
    .code{
        p{
          .PxToRem(width,200);
          .PxToRem(height,60);
          border:1px solid #1cc6a3;

          color:#1cc6a3;
          text-align:center;
           .PxToRem(line-height,60);
           .PxToRem(border-radius,30);
        }
    }
}

.Next{
  .PxToRem(margin-top,180);
  border:none;
    p{
         text-align: center;
         .PxToRem(margin-bottom,40);
      span{
          color:#1cc6a3;
      }
    }
    div{

      width:80%;
      background:#1cc6a3;
      .PxToRem(height,80);
      text-align: center;
      .PxToRem(line-height,80);
      .PxToRem(border-radius,60);
      .PxToRem(font-size,40);
      color:#ffffff;
      margin:0 auto;
    }
}










</style>











